<template>
	<view class="info_data">
		<!-- 		<view class="info_item" v-for="(item,index) in infoDataList" :key="item.title" @click="modifyInfo(index)">
			<text>{{item.title}}</text>
			<view>
				<text>{{item.txt}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view> -->

		<view class="info_item" @click="modifyInfo(0)">
			<text>与患者关系</text>
			<view>
				<text>{{userInfo.relationship}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(1)" style="margin-top: 10rpx;">
			<text>患者姓名</text>
			<view>
				<text>{{userInfo.patientName}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(2)">
			<text>性别</text>
			<view>
				<text>{{userInfo.patientSex}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(3)">
			<text>出生日期</text>
			<view>
				<text>{{userInfo.birthday}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(4)">
			<text>联系电话</text>
			<view>
				<text style="border: none; padding: 0;">{{userInfo.phone}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(5)" style="margin-top: 10rpx;">
			<text>痛风类型</text>
			<view>
				<text>{{userInfo.type}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(6)">
			<text>确诊日期</text>
			<view>
				<text>{{userInfo.confirmDate}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(7)">
			<text>并发疾病</text>
			<view>
				<text class="showtext">{{userInfo.sicknessOther}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<view class="info_item" @click="modifyInfo(8)">
			<text>家族史</text>
			<view>
				<text>{{userInfo.family}}</text>
				<image class="arr_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<!-- 确定 -->
		<text class="sub_user_info" @click="subUserInfo">
			保存
		</text>

		<!-- 日期选择 -->
		<u-picker mode="time" v-model="showTime" @confirm='confirmTime'></u-picker>

		<!-- 模态框 -->

		<view class="modify_info" @click="closeModify" v-show="showModifyInfo">
			<view class="modify" @click.stop>
				<!-- 与亲人关系 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 0">
					<text class="modify_item" @click="changeModifyInfo('本人',0)">本人</text>
					<text class="modify_item" @click="changeModifyInfo('亲属',0)">亲属</text>
					<!-- 确认 -->
					<view class="cancel">
						<text @click.stop="closeModify">取消</text>
					</view>
				</view>

				<!-- 患者姓名 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 1">
					<text style="border: none; padding: 0;">{{userInfo.patientName}}</text>
					<input class="input_name" type="text" v-model="newPatientName" placeholder="输入姓名" focus>
					<!-- 确认 -->
					<view class="cancel">
						<text  @click.stop="closeModify">取消</text>
						<text @click.stop="determine('患者姓名')">确定</text>
					</view>
				</view>
				<!-- 性别 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 2">
					<text class="modify_item" @click="changeModifyInfo('男',2)">男</text>
					<text class="modify_item" @click="changeModifyInfo('女',2)">女</text>
					<!-- 确认 -->
					<view class="cancel">
						<text @click.stop="closeModify">取消</text>
					</view>
				</view>
				<!-- 联系电话 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 4">
					<text style="padding: 0; border: none;">{{userInfo.phone}}</text>
					<input class="input_name" type="number" v-model="newPhone" placeholder="输入手机号" focus>
					<!-- 确认 -->
					<view class="cancel">
						<text @click.stop="closeModify">取消</text>
						<text @click.stop="determine('联系电话')">确定</text>
					</view>
				</view>
				<!-- 痛风类型 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 5">
					<text class="modify_item" @click="changeModifyInfo('痛风',5)">痛风</text>
					<text class="modify_item" @click="changeModifyInfo('高尿酸血症',5)">高尿酸血症</text>
					<!-- 确认 -->
					<view class="cancel">
						<text @click.stop="closeModify">取消</text>
					</view>
				</view>
				<!-- 并发疾病 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 7"> 
					<view style="padding: 20rpx 0 40rpx 0;">
						<u-checkbox-group  @change="checkboxGroupChange" wrap>
							<u-checkbox @change="checkboxChange(item,index)"  v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
							 shape="circle" active-color="#1aa034">
								<text style="font-size: 36rpx;">{{item.name}}</text>
							</u-checkbox>
						</u-checkbox-group>
						<input style="margin:10rpx 30rpx; height: 60rpx; border-bottom: 1rpx solid #999; font-size: 32rpx;" type="text" placeholder="其他病症" v-model="userInfo.otherName"> 
					</view>
					<!-- 确认 -->
					<view class="cancel">
						<text @click.stop="determine('并发疾病')">确定</text>
					</view>

				</view>

				<!-- 家族史 -->
				<view class="modify_list" v-show="changeModifyInfoIndex == 8">
					<text class="modify_item" @click="changeModifyInfo('有家人痛风',8)">有家人痛风</text>
					<text class="modify_item" @click="changeModifyInfo('没有家人痛风',8)">没有家人痛风</text>
					<text class="modify_item" @click="changeModifyInfo('不清楚',8)">不清楚</text>
					<!-- 确认 -->
					<view class="cancel">
						<text @click.stop="closeModify">取消</text>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				arrImg: require('../../status/image/arr.png'),
				// 模态框
				showModifyInfo: false,
				changeModifyInfoIndex: 0,
				// 时间选择
				showTime: false,
				// 新的姓名
				newPatientName: '',
				// 新的手机号
				newPhone: '',
				// 数据
				userInfo: {
					// 与患者关系
					relationship: '',
					// 患者姓名
					patientName: '',
					// 患者性别
					patientSex: '',
					// 出生日期
					birthday: '',
					// 联系电话
					phone: '',
					// 痛风类型
					type: '',
					// 确诊日期
					confirmDate: '',
					// 并发症
					sicknessOther: '无并发疾病',
					// 并发症数据
					sicknessOtherList: '', 
					// 并发症其他
					otherName: '',
					// 家族史
					family: '',
				},
				newList: [],
				list: [{
						name: '无并发疾病',
						checked: true,
						disabled: false,
						index: 0
					},
					{
						name: '高血压',
						checked: false,
						disabled: false,
						index: 1
					},
					{
						name: '高血脂',
						checked: false,
						disabled: false,
						index: 2
					},
					{
						name: '糖尿病',
						checked: false,
						disabled: false,
						index: 3
					},
					{
						name: '心血管疾病',
						checked: false,
						disabled: false,
						index: 4
					},
					{
						name: '肾脏功能受损',
						checked: false,
						disabled: false,
						index: 5
					},
					{
						name: '肾结石',
						checked: false,
						disabled: false,
						index: 6
					},
					{
						name: '痛风石',
						checked: false,
						disabled: false,
						index: 7
					}
				]
			};
		},
		onLoad(options) {    
			if(options.healthDetail){
				let healthDetail = JSON.parse(options.healthDetail)
				this.filterHealthDetail(healthDetail) 
			} 
		},
		methods: {
			modifyInfo(index) {
				this.changeModifyInfoIndex = index
				if (index == 3 || index == 6) {
					this.showTime = true
				} else if(index == 7){
					// this.list[0].checked = false;
					// for(let i=0;i<this.list.length;i++){
					// 	// this.userInfo.sicknessOtherList = '';
					// 	if(this.userInfo.sicknessOther.indexOf(this.list[i].name) != '-1'){
					// 		this.list[i].checked = true;
					// 		if(this.userInfo.sicknessOther.length == 1){
					// 			this.userInfo.sicknessOtherList = i
					// 		}else if(this.userInfo.sicknessOther.length == 0){
					// 			this.userInfo.sicknessOtherList = '0';
					// 			this.userInfo.sicknessOther = ['无并发疾病'];
					// 			this.list[0].checked = true;
					// 		}else{
					// 			this.userInfo.sicknessOtherList += this.list[i].index + ',' 
					// 		}
					// 	}
					// }
					this.showModifyInfo = true
				}else{
					this.showModifyInfo = true
				}
			},
			// 更改数据
			changeModifyInfo(value, index) {
				switch (index) {
					case 0:
						this.userInfo.relationship = value;
						break;
					case 2:
						this.userInfo.patientSex = value;
						break;
					case 5:
						this.userInfo.type = value;
						break;
					case 8:
						this.userInfo.family = value
				}
				this.showModifyInfo = false
			},
			// 时间选择
			confirmTime(value) {
				switch (this.changeModifyInfoIndex) {
					case 3:
						this.userInfo.birthday = value.year + '-' + value.month + '-' + value.day;
						break;
					case 6:
						this.userInfo.confirmDate = value.year + '-' + value.month + '-' + value.day;
				}
			},
			// 关闭
			closeModify() {
				this.showModifyInfo = false
			},
			// 确认
			determine(type) {
				let _this = this
				switch (type) {
					case '患者姓名':
						_this.userInfo.patientName = _this.newPatientName;
						break;
					case '联系电话':
						_this.userInfo.phone = _this.newPhone;
						break;
					case '并发疾病': 
					_this.userInfo.sicknessOtherList = ''
					_this.list.map(item => {
						if(item.checked){
							_this.userInfo.sicknessOtherList += item.index == 0 ? '0' : item.index + ',';
						} 
					}) 
					if (this.userInfo.otherName !== '') {
						if(this.userInfo.sicknessOther.indexOf(this.userInfo.otherName) < 0){
							this.userInfo.sicknessOther = this.userInfo.sicknessOther + ',' + this.userInfo.otherName
						} 
					}else{
						if(this.userInfo.sicknessOtherList.length >= 2 && this.userInfo.sicknessOtherList.indexOf(0) == 0){
							this.userInfo.sicknessOtherList = this.userInfo.sicknessOtherList.substr(1)
						} 
					}
						// if (this.userInfo.otherName !== '其他病症' && this.userInfo.otherName !== '') { 
						// 	if(this.userInfo.sicknessOther.indexOf(this.userInfo.otherName) < 0){
						// 		this.userInfo.sicknessOther = this.userInfo.sicknessOther + ',' + this.userInfo.otherName
						// 	} 
						// }else{
						// 	if(this.userInfo.sicknessOtherList.length > 2 && this.userInfo.sicknessOtherList.indexOf(0) == 0){
						// 		this.userInfo.sicknessOtherList = this.userInfo.sicknessOtherList.substr(1)
						// 	} 
						// }

				}
				this.showModifyInfo = false
			},
			checkboxChange(item,val) {  
			 
				if(val == 0){
					if(!item.checked){ 
						this.list.forEach((v,i)=>{
							if(i!=0){
								v.checked = false
							}
						})
					}	
					// this.userInfo.sicknessOtherList = '0'
					item.checked = !item.checked   
					this.userInfo.otherName = ''
				}else{
					
					if(!item.checked){
						this.list[0].checked = false 
					}else{        
						// 取消选择
						// let arr = this.userInfo.sicknessOtherList.split(',') 
						// console.log(arr)
					} 
				}   
			},
			checkboxGroupChange(val) {  
				this.userInfo.sicknessOther = [...val]  
				
				// for(let i=0; i<this.list.length; i++){
				// 	// this.userInfo.sicknessOtherList = ''; 
				// 	if(this.userInfo.sicknessOther.indexOf(this.list[i].name) != '-1'){
				// 		if(this.userInfo.sicknessOther.length == 1){
				// 			this.userInfo.sicknessOtherList = i
				// 		}else if(this.userInfo.sicknessOther.length == 0){
				// 			this.userInfo.sicknessOtherList = '0';
				// 			this.userInfo.sicknessOther = ['无并发疾病'];
				// 			this.list[0].checked = true;
				// 		}else{  
				// 			this.userInfo.sicknessOtherList = this.userInfo.sicknessOtherList + this.list[i].index + ','   
				// 		}
				// 	}
				// } 
			},
			// 保存信息
			subUserInfo() {   
				let sex;
				let relation;
				let type;
				let family;
				let sicknessOther;
				// 性别
				if(this.userInfo.patientSex == '男'){
					sex = 1
				}else if (this.userInfo.patientSex == '女'){
					sex = 2
				}
				// 家族史
				if(this.userInfo.family == '有家人痛风'){
					family = 1
				} else if (this.userInfo.family == '没有家人痛风'){
					family = 2
				} else if (this.userInfo.family == '不清楚'){
					family = 3
				} 
				// 与患者关系
				if(this.userInfo.relationship == '本人'){
					relation = 1
				}else if(this.userInfo.relationship == '亲属'){
					relation = 2
				}
				
				// 痛风类型
				if(this.userInfo.type == '痛风'){
					type = 1
				}else if(this.userInfo.type == '高尿酸血症'){
					type = 2
				} 
				let data = {
					name: this.userInfo.patientName,
					sex, 
					birthday: this.userInfo.birthday,
					phone: this.userInfo.phone,
					type,
					confirm_date: this.userInfo.confirmDate,
					sickness_other: this.userInfo.sicknessOtherList,
					other_name: this.userInfo.otherName,
					family,
					relation 
				}
				console.log(data)
				// for (let key in data) {
				// 	if (data[key] == '' || data[key] == undefined) {
				// 		uni.showToast({
				// 			title: '有未填项',
				// 			icon: 'none'
				// 		})
				// 		return false
				// 	}
				// }
				this.$api.sendRequest({
					url: '/api/health/addBaseInfo',
					data,
					header: {'content-type': 'application/json'},
					success: res => { 
						
						if(res.code >= 0){
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack(1)
							},1000)
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				})
			},
			// 接收数据
			filterHealthDetail(healthDetail){ 
				// 关系 
				if(healthDetail.relation == 1){
					this.userInfo.relationship = '本人'
				}else if (healthDetail.relation == 2){
					this.userInfo.relationship = '亲属'
				} 
				// 姓名
				this.userInfo.patientName = healthDetail.name
				// 电话
				this.userInfo.phone = healthDetail.phone
				// 性别 
				if(healthDetail.sex == 1){
					this.userInfo.patientSex = '男'
				}else if (healthDetail.sex == 2){
					this.userInfo.patientSex = '女'
				}
				// 出生日期
				this.userInfo.birthday = healthDetail.birthday
				//痛风类型
				if( healthDetail.type == 1){
					this.userInfo.type = '痛风'
				} else if (healthDetail.type == 2) {
					this.userInfo.type = '高尿酸血症'
				}
				// 确诊日期
				this.userInfo.confirmDate = healthDetail.confirm_date
				// 并发症状
				if(healthDetail.sickness_other){
					this.userInfo.sicknessOther = []
					healthDetail.sickness_other.split(',').map(item => {
						switch(item){
							case '0':
							this.userInfo.sicknessOther.push('无并发疾病');
							break;
							case '1':
							this.userInfo.sicknessOther.push('高血压');
							break;
							case '2':
							this.userInfo.sicknessOther.push('高血脂');
							break;
							case '3':
							this.userInfo.sicknessOther.push('糖尿病');
							break;
							case '4':
							this.userInfo.sicknessOther.push('心血管疾病');
							break;
							case '5':
							this.userInfo.sicknessOther.push('肾脏功能受损');
							break;
							case '6':
							this.userInfo.sicknessOther.push('肾结石');
							break;
							case '7':
							this.userInfo.sicknessOther.push('痛风石');
							break;
							case '8':
							this.userInfo.otherName = healthDetail.other_name;
							break;
						}
					})
				} 
				// 其他并发症
				// this.userInfo.otherName = healthDetail.other_name
				// 家族史
				if(healthDetail.family == 1){
					this.userInfo.family = '有家人痛风'
				}else if (healthDetail.family == 2){
					this.userInfo.family = '没有家人痛风'
				} else if (healthDetail.family == 3){
					this.userInfo.family = '不清楚'
				}
			}
		}
	}
</script>

<style lang="less">
	.info_data {
		.info_item {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 20rpx;
			background-color: #fff;
			border: 1rpx solid #ebebeb;
			border-bottom: none;

			view {
				line-height: 100rpx;

				.arr_img {
					margin-left: 20rpx;
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}
		}

		.modify_info {
			position: fixed;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);

			.modify {
				padding: 30rpx;
				position: relative;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 600rpx;
				line-height: 66rpx;
				min-height: 300rpx;
				background: #fff;
				border-radius: 20rpx;

				.modify_list {
					line-height: 70rpx;
					font-size: 32rpx;
					.modify_item {
						display: block;
					}
					& > text{
						padding: 0 20rpx;
						border-bottom: 1rpx solid #eee;
					}
					.input_name {
						margin-top: 30rpx;
						border-bottom: 2rpx solid #1aa034;
					}
				}

				.cancel {
					display: flex;
					justify-content: space-between;
					position: absolute;
					width: 140rpx;
					right: 60rpx;
					font-size: 30rpx;
					bottom: 30rpx;
					font-weight: 700;
					color: #1aa034;
					text{
						padding: 0;
						border: none;
					}
				}
			}
		}

		.showtext {
			text-align: right;
			width: 400rpx;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			vertical-align: middle;
		}

		.sub_user_info {
			margin: 40rpx 60rpx;
			display: block;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			border-radius: 20rpx;
			background-color: #1aa034;
		}
	}
</style>
